DAY21：Nuxt 3 身份驗證模組 nuxt-auth

需要安裝 nuxt-auth 模組。您可以使用 npm、yarn 或 pnpm 進行安裝，具體取決於您的包管理器。

# 使用 npm 安裝
npm i -D @sidebase/nuxt-auth

# 使用 yarn 安裝
yarn add -D @sidebase/nuxt-auth

# 使用 pnpm 安裝
pnpm i -D @sidebase/nuxt-auth

功能

nuxt-auth 是一個旨在支持任何通用 Nuxt 3 應用程序的身份驗證的庫。目前支持兩種提供者：

• Auth.js / NextAuth.js：為 Nuxt 3 生態系統提供了12,000+星的庫的可靠性和便利性，具有本地開發人員體驗（DX）。

• local：對於依賴於外部後端的靜態頁面，使用憑據流進行身份驗證。從模組的版本0.6開始支持 local 提供者。

nuxt-auth 的 authjs-provider 功能包括：

• 身份驗證提供者：OAuth（例如 Github、Google、Twitter、Azure 等）、自定義 OAuth、憑據（密碼 + 用戶名）、電子郵件 Magic URL。
• 異構/通用身份驗證可用性，useAuth 支持：actions（getSession、getCsrfToken、getProviders、signIn、signOut）、getters（status、data、lastRefreshedAt）。
• 所有方法和屬性的完整 TypeScript 支持。
• 應用程序端的中間件保護。
• 服務器端中間件和端點保護。
• 用於會話生命週期管理的高級功能：定期刷新會話、在標籤重新聚焦時刷新會話、在頁面加載時的一次性會話提取，然後用於特定操作（例如導航）。
• REST API：GET /signin、POST /signin/:provider、GET/POST /callback/:provider、GET /signout、POST /signout、GET /session、GET /csrf、GET /providers。

如何測試靜態 Nuxt 3 應用程序？

要測試靜態 Nuxt 3 應用程序，我們希望運行靜態前端和一個獨立的後端，後者將接管身份驗證：

• 在 playground-local/nuxt.config.ts 中，將 baseURL: 'http://localhost:3001' 添加到身份驗證配置。
• 啟動靜態前端：

cd playground-local
pnpm generate
pnpm start

• 啟動身份驗證後端（我們使用相同 nuxt3 應用程序的第二個實例）：

cd playground-local
pnpm dev

# 現在應該在 http://localhost:3001 上運行第二個 Nuxt 應用程序，我們純粹用於身份驗證

# 訪問 http://localhost:3000 -> 這應該打開靜態應用程序。執行任何與身份驗證相關的操作，應用程序應該將請求發送到在端口3001上運行的後端

使用 nuxt-auth 模組，可以輕鬆實現身份驗證功能，支持不同的提供者和靜態 Nuxt 3 應用程序。